<template>
	<!--综合税费申报详情-->
	<view class="zhsfsb">
		<view class="title">
			<text>申报详情</text>
		</view>
		<view class="sbLists">
			<uni-group class="dqjItem">
				<view class="sbtitle">
					<view>出租屋地址：{{zhsbData.address}}</view>
				</view>
				<view v-if="zlJqJudge">
					<view class="item">
						<view class="name">申报类型</view>
						<view class="con">综合税申报</view>
					</view>
					<view class="item">
						<view class="name">租赁编号</view>
						<view class="con">{{zhsbData.rentCode}}</view>
					</view>
					<view class="item">
						<view class="name">纳税人识别号</view>
						<view class="con">{{zhsbData.shxydm}}</view>
					</view>
					<view class="item">
						<view class="name">纳税人名称</view>
						<view class="con">{{zhsbData.nsrmc}}</view>
					</view>
					<view class="item">
						<view class="name">出租起止时间</view>
						<view class="con">
							<text v-if="zhsbData.rentStartDate">{{zhsbData.rentStartDate+"至"+zhsbData.rentEndDate}}</text>
						</view>
					</view>
					<view class="item">
						<view class="name">租赁类别</view>
						<view class="con">{{zhsbData.houseRentTypeMc}}</view>
					</view>
					<view class="item">
						<view class="name">租赁用途</view>
						<view class="con">{{zhsbData.rentUseTypeMc}}</view>
					</view>
					<view class="item">
						<view class="name">租赁性质</view>
						<view class="con">{{zhsbData.rentPropertyMc}}</view>
					</view>
					<view class="item">
						<view class="name">应税土地面积</view>
						<view class="con">{{zhsbData.taxArea}}</view>
					</view>
					<view class="item">
						<view class="name">所占比例</view>
						<view class="con"><text v-if="zhsbData.szfe">{{zhsbData.szfe*100 + "%"}}</text></view>
					</view>
					<view class="item">
						<view class="name  hj">税款所属期</view>
						<view class="con">
							<text v-if="zhsbData.skssqq">{{zhsbData.skssqq+"至"+zhsbData.skssqz}}</text>
						</view>
					</view>
					<view class="item">
						<view class="name  hj">申报时间</view>
						<view class="con">
							<text>{{zhsbData.sbsj}}</text>
						</view>
					</view>
					<view class="item">
						<view class="name  hj">缴款状态</view>
						<view class="con">{{zhsbData.jkzt}}</view>
					</view>
					<view class="item">
						<view class="name  hj">发票类型</view>
						<view class="con">增值税电子发票</view>
					</view>
				</view>
			</uni-group>
		</view>
		<view class="zlzkorxs">
			<view class="zlxxZs" v-show="!zlJqJudge" @click="bindZs">
				<view>租赁详情展开</view>
				<uni-icons custom-prefix="custom-icon" type="bottom" size="30" class="cg"></uni-icons>
			</view>
			<view class="zlxxZs" v-show="zlJqJudge" @click="bindZs">
				<view>租赁详情收起</view>
				<uni-icons custom-prefix="custom-icon" type="top" size="30" class="cg"></uni-icons>
			</view>
		</view>
		<view class="sesj">
			<view class="seTitle">
				<view class="lsbt"></view>
				<text>租赁明细信息</text>
			</view>
		</view>
		<view class="table">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="100rpx">序号</uni-th>
					<uni-th align="center" width="250rpx">租金所属期起止</uni-th>
					<uni-th align="center" width="150rpx">月租金</uni-th>
					<uni-th align="center" width="225rpx">计税租金(含税)</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in zlData" :key="index">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td align="center">{{item.rentSsqq+"~"+item.rentSsqz}}</uni-td>
					<uni-td align="center">{{item.agreementRent}}</uni-td>
					<uni-td align="center">{{item.rent}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="gdc"></view>
		<view class="sesj">
			<view class="seTitle">
				<view class="lsbt"></view>
				<text>申报信息</text>
			</view>
		</view>
		<view class="table">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="150rpx">征收项目</uni-th>
					<uni-th align="center" width="175rpx">应纳税额</uni-th>
					<uni-th align="center" width="175rpx">减免税额</uni-th>

				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in czwSbMxDTOList" :key="index">
					<uni-td align="center">{{item.houseNote}}</uni-td>
					<uni-td align="center">{{item.ynse}}</uni-td>
					<uni-td align="center">{{Math.round(Number(item.jmse+item.phjmse)*100)/100}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" style="font-weight: bold;">合计</uni-td>
					<uni-td align="center">{{ynsehj}}</uni-td>
					<uni-td align="center">{{jmsehj}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="gdc"></view>
		<view>
			<view class="sesj">
				<view class="seTitle">
					<view class="lsbt"></view>
					<text>已缴税额</text>
				</view>
				<view class="seItem">
					<view>
						<view class="itemTitle">
							已缴税额（元）
						</view>
					</view>
					<view class="itemMny">{{yjseHj}}</view>
				</view>
			</view>
			<view class="gdc"></view>
			<view class="sesj">
				<view class="seTitle">
					<view class="lsbt"></view>
					<text>应补（退）税额</text>
				</view>
				<view class="seItem">
					<view>
						<view class="itemTitle">
							应补（退）税额（元）
						</view>
					</view>
					<view class="itemMny">{{zhsbData.ybtse}}</view>
				</view>
			</view>
			<view class="btn">
				<button type="primary" size="mini" @click="goBack">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ystFsSbxxDetailById
	} from "@/utils/common-api.js"
	export default {
		data() {
			return {
				zhsbData: {},
				// 租赁信息
				zlData: [],
				zlJqJudge: true, //表格显示状态
				zhsfsbForm: "",
				czwSbMxDTOList: "", //应纳税额列表
				sbId: "", //申报id
				yjseHj: 0,
				ynsehj: 0,
				jmsehj: 0,
			}
		},
		onLoad(e) {
			// console.log(e) 
			// this.zhsfsbForm = JSON.parse(e.zhsfsbForm)
			this.handleSearch(e.sbId)
		},
		methods: {
			async handleSearch(val) {
				let res = await ystFsSbxxDetailById({
					id: val
				})
				if (res.body && res.head.errorCode == "0") {
					// console.log(res)
					this.zhsbData = res.body
					// 租赁信息
					this.zlData = res.body.czwSbRentZbDTOList
					this.czwSbMxDTOList = res.body.czwSbMxDTOList
					this.yjseHj = 0
					this.ynsehj = 0
					this.jmsehj
					this.czwSbMxDTOList.map(item => {
						this.yjseHj = Math.round((this.yjseHj + item.yjse) * 100) / 100;
						this.ynsehj = Math.round((this.ynsehj + item.ynse) * 100) / 100;
						this.jmsehj = Math.round((this.jmsehj + item.jmse + item.phjmse) * 100) / 100;

					})
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 返回修改
			goBack() {
				uni.navigateBack()
			},
			// 点击展开或收起
			bindZs() {
				if (this.zlJqJudge) {
					this.zlJqJudge = false
				} else {
					this.zlJqJudge = true
				}

			},
			// 返回修改
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.zhsfsb {}

	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}

	.sbLists {
		box-sizing: border-box;
		width: 100%;
		font-weight: bold;
		font-size: 26rpx;
	}

	.dqjItem {
		background: #ffffff;
		border: 2rpx solid #e7e7e7;
	}

	.sbtitle {
		padding: 10rpx 20rpx;
		border-bottom: 5rpx solid #3171d5;
		color: #3171d5;
		word-wrap: break-word;
	}

	.sbLists .qjk {
		margin-right: 20rpx;
	}

	::v-deep .uni-group .uni-group__content {
		padding: 0;
	}

	.uni-group__content {
		padding: 0;
	}

	.sbLists .item {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-bottom: 2rpx solid #66666640;
	}

	.sbLists .item:last-child {
		border-bottom: 0rpx solid #66666640;
	}

	.sbLists .item .name {
		width: 180rpx;
		color: #66666699;
		text-align: left;
		margin-right: 10rpx;
		padding-left: 20rpx;

	}

	.sbLists .item .con {
		color: #222222;
		text-align: left;
	}

	.sbLists .item .hj {
		color: #222222;
	}

	.table {
		padding: 10rpx;
		background: #ffffff;
	}

	.uni-table .uni-table-th,
	.uni-table .uni-table-td {
		font-size: 24rpx;
		color: black;
		padding: 10rpx 10rpx;
	}

	.uni-table .uni-table-th {
		background: #f2f2f2;
	}

	.zlzkorxs {
		display: flex;
		justify-content: center;
		background: #ffffff;
		padding: 10rpx 0;
	}

	.zlxxZs {
		font-size: 28rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3171d5;
		width: 240rpx;
		border: 2rpx solid #3171d5;
		padding: 5rpx;
		border-radius: 6rpx;
	}

	.uniui-bottom {
		font-size: 28rpx !important;
		color: #3171d5 !important;
		font-weight: bold;
	}

	.uniui-top {
		font-size: 28rpx !important;
		color: #3171d5 !important;
		font-weight: bold;
	}

	.jksjxz {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.sjxz {
		width: 250rpx;
		border: 1px #e5e5e5 solid;
		border-radius: 8rpx;
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.btn {
		text-align: center;
		padding: 10rpx;
	}

	.btn uni-button {
		width: 240rpx;
		margin: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.sesj {
		margin-top: 10rpx;
		background: #ffffff;
	}

	.sesj>.seTitle {
		border-bottom: 2rpx #e5e5e5 solid;
		font-weight: bold;
		font-size: 28rpx;
		position: relative;
		padding: 10rpx 20rpx;
	}

	.seTitle .lsbt {
		position: absolute;
		left: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 30rpx;
		background: #1198d3;
		border-radius: 4rpx;
	}

	.seItem {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx #e5e5e5 solid;
	}

	.itemTitle,
	.itemMny {
		font-size: 28rpx;
	}

	.itemMny {
		min-width: 150rpx;
		text-align: center;
		color: red;
		font-weight: bold;
		word-wrap: break-word;
		word-break: break-all;
	}

	.itemTip {
		font-size: 20rpx;
		color: #666666;
	}

	.gdc {
		width: 100%;
		height: 20rpx;
		background-color: #f2f2f2;
	}
</style>